// components/chinaMap/index.tsx

import { useRef, useEffect } from "react";
import * as echarts from "echarts";
import { geoJson } from "./geoJson";

const ChinaMap = ({option,width = "100%",height = "100%"}) => {
  const ref = useRef(null);
  let mapInstance= echarts.ECharts | null;

  const renderMap = () => {
    if (ref.current) {
      const renderedMapInstance = echarts.getInstanceByDom(ref.current);
      if (renderedMapInstance) {
        mapInstance = renderedMapInstance;
      } else {
        mapInstance = echarts.init(ref.current);
      }
      mapInstance.setOption(option);
    }
  };

  useEffect(() => {
    echarts.registerMap("china", geoJson );
    renderMap();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    window.onresize = function () {
      // 调用 echarts实例上 resize 方法
      mapInstance?.resize();
    };
    return () => {
      // 销毁实例，销毁后实例无法再被使用。
      mapInstance && mapInstance.dispose();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <div ref={ref} style={{ width: width, height: height }} />;
};

export default ChinaMap;
